<template>
    <el-form  v-if="enable" ref="form" class="act-form" label-width="100px">
      <el-form-item :label="label">
        <el-input v-model="id" @input="idInput"></el-input>
      </el-form-item>
    </el-form>
</template>
<script>
export default {
  props: {
    element: {
      type: Object,
      default: undefined
    },
    bpmnModeler: {
      type: Object,
      default: undefined
    }
  },
  data () {
    return {
      label: 'ID',
      id: ''
    }
  },
  computed: {
    enable () {
      return true
    }
  },
  watch: {
    'element': {
      handler (newVal) {
        this.id = this.element.businessObject.id
      },
      immediate: false,
      deep: false
    }
  },
  methods: {
    idInput(newVal) {
        if (this.element) {
          this.bpmnModeler.get('modeling').updateProperties(this.element, { id: newVal })
        }
      }
  }
}
</script>
